<!--
 * @Author: ganjiejie 8025279+ganjiejie@user.noreply.gitee.com
 * @Date: 2025-05-20 15:05:00
 * @LastEditors: ganjiejie 8025279+ganjiejie@user.noreply.gitee.com
 * @LastEditTime: 2025-05-21 17:00:21
 * @FilePath: \gj-vue3-vite-pinia-app\src\components\goodsItem.vue
 * @Description: 每项商品
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="goods-item">
    <img class="img" :src="getImageUrl(item.img)" alt="图片" />
    <div class="info">
      <div class="title">{{ item.name }}</div>
      <div class="content">
        {{ item.content }}
      </div>
      <div class="price-count">
        <div class="price">{{ item.price }}</div>
        <div class="count">
          <div>
            <i class="ri-add-line"></i>
            <span>22</span>
          </div>
          <i class="ri-subtract-line"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps(["item"]);
const item = props.item;
console.log(item.img);

// Vite官方推荐的方式 Vite不支持Webpack的require语法，但你可以使用import.meta.glob
const getImageUrl = (name) => {
  return new URL(`@/assets/images/${name}`, import.meta.url).href;
};
console.log(getImageUrl(item.img), item.img);
</script>
<style scoped>
.goods-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.goods-item .img {
  width: 80px;
  height: 80px;
}
.goods-item .info {
  flex: auto;
  padding-left: 10px;
}
.info .titile {
  font-size: 16px;
  font-weight: bold;
  /* 关键样式 */
  display: -webkit-box; /* 兼容性写法 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden; /* 隐藏溢出 */
  text-overflow: ellipsis; /* 省略号 */
}
.info .content {
  font-size: 12px;
  color: #999;
  /* 新增多行省略 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.info .price-count {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info .price-count .count {
  display: flex;
}
</style>
